/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles/tokens' as awsui;
@use '../internal/styles' as styles;
@use '../app-layout/constants.scss' as constants;

@mixin desktop-only {
  @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
    @content;
  }
}

.drawer {
  @include styles.styles-reset;
  word-wrap: break-word;
}

.header {
  @include styles.font-panel-header;
  display: flex;
  justify-content: space-between;
  color: awsui.$color-text-heading-default;
  padding-block: awsui.$space-panel-header-vertical;
  padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-l} + #{awsui.$space-scaled-xxl});
  // padding to make sure the header doesn't overlap with the close icon
  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;

  @include desktop-only {
    &.with-additional-action {
      /*
        this padding is needed when the drawer renders inside a runtime drawer and the runtime drawer has an additional action
        on the right (or left in rtl). in this case this padding ensures that the drawer's content does not overlap with runtime actions
      */
      padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-xxl});
    }
  }

  &.with-runtime-context {
    padding-block: constants.$toolbar-vertical-panel-icon-offset;
  }

  .with-toolbar > & {
    border-color: transparent;
    margin-block-end: 0px;
  }

  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
  h2,
  h3,
  h4,
  h5,
  h6 {
    @include styles.font-panel-header;
    padding-block: 0;
    margin-block: 0;
  }
  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
}

.header-actions {
  display: inline-flex;
  align-items: flex-start;
  z-index: 1;
}

.content-with-paddings:not(:empty) {
  padding-block-start: awsui.$space-panel-content-top;
  padding-inline-start: awsui.$space-panel-side-left;
  padding-inline-end: awsui.$space-panel-side-right;
  padding-block-end: awsui.$space-panel-content-bottom;
}

.test-utils-drawer-content {
  /* used in test-utils */
}
